<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
	<title>卖座电影</title>
	<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
	<link rel="stylesheet" href="lib/swiper-3.4.2.min.css">
	<link rel="stylesheet" type="text/css" href="./css/main.css">
	<script src="lib/jquery.js"></script>
	<script src='lib/swiper-3.4.2.jquery.min.js'></script>	
	<script src='js/main.js'></script>
	<script src='lib/vue.js'></script>
	<script src='lib/vue-resource.js'></script>
	<script src='lib/vue-router.js'></script>
</head>

<script>
	$(document).ready(function(){
		 $(".toTop").hide();//一开始隐藏
		$(function () {
		$(window).scroll(function(){
			if ($(window).scrollTop()>100){
			$(".toTop").fadeIn(1500);
			//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
			}
		else
			{
			$(".toTop").fadeOut(1500);
			}
		});
		//当点击跳转链接后，回到页面顶部位置
		$(".toTop").click(function(){
			$('body,html').animate({scrollTop:0},1000);
			return false;
			});
		});
	});

</script>

<body>
	<div id="app" >
		<v-header v-bind:show="show" v-on:change="changeshow"></v-header>
		<router-view></router-view>
		<div class="toTop" >
			<i class="iconfont icon-top"></i>	
		</div>

		<v-aside v-bind:show="show" v-on:change="changeshow"></v-aside>
	</div>
	<!--header-->
	<template id='header'>
			<header>
				<div class="topbar">
					<div class="topbar-list">
						<i class="iconfont icon-list" @click="change();"></i>
					</div>
					<div class="title">卖座电影</div>
				</div>
				<div class="nav-right">
					<a href="" class="city">
						<span>深圳</span>
						<i class="iconfont icon-jiantou"></i>
					</a>
					<router-link  to="/login "class='my'>
						<i class="iconfont icon-my"></i>
						 <i class="login"></i>
					</router-link>
				</div>
			</header>
	</template>
	

	<!--首页-->
	<template id='home'>
		<div class="content">	
			<!--轮播图-->
			<div class="swiper-container slider">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide" v-for="item in lunboList">
		                <a :href="item.url">
		                    <img :src="item.imageUrl" alt="">
		                </a>
		            </div>
		        </div>
              </div>

			<div class="comingmovie">	
			<ul>
			<!--正在上映-->
				<li v-for='item in nowList'>
					<router-link :to="{name:'detail',params:{'id':item.id}}">
						<div class="movie-img">
							<img :src="item.cover.origin" alt="">
						</div>
						<div class="movie-info">
							<div class="imformation">
								<p>{{item.name}}</p>
								<p><span>{{item.cinemaCount}}</span>家影院上映<span>{{item.watchCount}}</span>人购票</p>
							</div>
							<div class="rating"> {{item.grade}}</div>
						</div>
					</a>
				</li>
				
			</ul>
			<div class="more-button">
				<button>更多热映电影</button>
			</div>
			</div>
			<div class="will-show hot-movie">
			<div class="title">
			<!--即将上映-->
				<div class="upcoming"> 即将上映</div>
			</div>
			<ul>
				<li v-for='item in soonList'>
					<router-link :to="{name:'detail',params:{'id':item.id}}">
						<div class="movie-img">
							<img :src="item.cover.origin" alt="">
						</div>
						<div class="movie-info">
							<div class="imformation">
								<p>{{item.name}}</p>
							</div>
							<div class="time"><span>{{new Date(item.premiereAt).getMonth()+1}}</span>月<span>{{new Date(item.premiereAt).getDate()}}</span>日上映</div>
						</div>
					</router-link>
				</li>			
			</ul>
			<div class="more-button">
				<button>更多即将上映电影</button>
			</div>
			</div>
		</div>
	</template>

		<!--隐藏点击到相应部分详情-->
	<template id="aside">
		<transition name="side" >
		<div class="sidebar-container" v-if="show">						
			<div class="slidebar-overlay" >
				<nav>
					<ul>
						<li @click="change();">
							<router-link to='/'>
								<span>首页</span>
								<i style="font-style:normal ">&gt;</i>
							</router-link>
						</li>
						<li @click="change();">
							<router-link to='/filmlist/nowlist'>
								<span>影片</span>
								<i style="font-style:normal ">&gt;</i>
							</router-link>
						</li>
						<li @click="change();">
							<router-link to="/baoanqu">
								<span>影院</span>
								<i style="font-style:normal ">&gt;</i>
							</router-link>
						</li>
						<li @click="change();">
							<a href="">
								<span>商城</span>
								<i style="font-style:normal ">&gt;</i>
							</a>
						</li>
						<li @click="change();">
							<a href="">
								<span>演出</span>
								<i style="font-style:normal ">&gt;</i>
							</a>
						</li>
						<li @click="change();">						
							<a href="">
								<span>我的</span>
								<i style="font-style:normal ">&gt;</i>
							</a>
						</li>
						<li @click="change();">
							<a href="">
								<span>卖座卡</span>
								<i style="font-style:normal ">&gt;</i>
							</a>
						</li>
					</ul>
				</nav>
			</div>	
					
		</div>	
		</transition>
	</template>

	<!--正在热映 详情-->
	<template id='filmlist'>
		<div class='wrap-filmlist'>
			<div class="tap">
				<div class="now">
					<router-link to='nowlist'>
						<div class="active">正在热映</div>
					</router-link>
				</div>
				<div class="soon">
					<router-link to='soonlist'>
						<div>即将上映</div>
					</router-link>
				</div>
			</div>
			<router-view></router-view>
		</div>
	</template>
	
	<template id='nowlist'>
		<div class="wrap-list">
				<ul>
					<li v-for="item in filmlist">
						<a href="">
							<div class="film-item">
								<div class="item-img">
									<img :src="item.poster.origin" alt="">
								</div>
								<div class="item-desc">
									<div class="title">
										<div class="film-name">{{item.name}}</div>	
										<div class="film-grade">{{item.grade}}</div>
										<div class="film-next-arrow">></div>					
									</div>
									<div class="miaoshu">
										<span>{{item.intro}}</span>
									</div>
									<div class="film-counts">
										<span class="film-color">{{item.cinemaCount}}</span>
										<span>家影院上映</span>
										<span class="film-color">{{item.watchCount}}</span>
										<span>人购票</span>
									</div>
								</div>
							</div>
						</a>
					</li>
				</ul>
		</div>
	</template>

	<template id='soonlist'>
		<div class="wrap-list">
				<ul>
					<li v-for="item in soonlist">
						<a href="">
							<div class="film-item">
								<div class="item-img">
									<img :src="item.poster.origin" alt="">
								</div>
								<div class="item-desc">
									<div class="title">
										<div class="film-name">{{item.name}}</div>	
									  
										<div class="film-next-arrow">></div>		
													
									</div>
									<div class="miaoshu">
										<span>{{item.intro}}</span>
									</div>
									<div class="film-counts">
										<span>{{item.premiereAt | formatDate}}</span>
										<span class="film-color">{{item.watchCount}}</span>
										<span>{{item.premiereAt | formatWeek}}</span>
									</div>
								</div>
							</div>
						</a>
					</li>
				</ul>
		</div>
	</template>

     <!--详情-->
	<template id="detail">
	    <div class="main m-detail">
	        <img :src="img" alt="">
	        <div class="detail-info">
	            <div class="u-title">影片简介</div>
	            <p>导　　演：{{detailInfo.director}}</p>
	            <p>主　　演：{{detailInfo.actors}}</p>
	            <p>地区语言：{{detailInfo.nation}} ({{detailInfo.language}})</p>
	            <p>类　　型：{{detailInfo.category}}</p>
	            <p>上映日期：{{detailInfo.premiereAt}}</p>
	            <p class="desc">{{detailInfo.synopsis}}</p>
	        </div>
	        <a href="javascript:;">立即购票</a>
	    </div>
	</template>
  <!--电影院详情-->
	<template id='allcinema'>
		<div class="wrap-cinema">
			<div class="cinemalist">
				<div class="wrap-go" v-for='(item,index) in cinemalist'>
					<div class="title" @click='item.willshow=!item.willshow'>
						<span>{{index}}</span>
					</div>
					<div class="content" v-for='value in item.list' v-if="item.willshow">
						<div class="wrap-content">
							<div class="cinema-title">{{value.name}}<i>座</i><i>通</i></div>
							<p><span>可乐爆米花</span></p>
							<div class="address">{{value.address}}</div>
							<p class="distance">距离未知</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</template>
  <!--登录-->
	<template id="login" >
	    <form action="">
	            <div>
	                <input onblur='' type="text" name='username' placeholder="输入手机号/邮箱"  v-model="username"><span></span>
	                <div></div>
	            </div>
	            <div>
	                <input type="password" name='pwd' placeholder="输入密码/验证码"  v-model="password"><span></span>
	                <div></div>
	            </div>
	            <button id="btn"  @click="login">登录</button>
	        </form>
	</template>

</body>
</html>

